<template>
    <div class="notice">
        <div class="content100" style="height: 100%">
            <div class="contract-cent" style="height: 100%; margin-top: 4px">
                <div class="contract-left" style="height: 100%">
                    <div class="leftcard" style="height: calc(100% - 40px); padding: 10px 0">
                        <ul class="cont-title-ul">
                            <li @click="netType(index, item)" class="ui-li" :class="{ active: index == titleActive }"
                                v-for="(item, index) in titleList" :key="index">
                                <el-image class="" style="width: 17; height: 17px" :src="item.icon"></el-image>
                                <!-- <i class="ag-icon" :class="index == titleActive ? item.iconActive:item.icon"></i> -->
                                <span>
                                    {{ item.name }} <el-badge :hidden="item.num == 0" class="numbox"
                                        :value="item.num"></el-badge>
                                    <!-- :hidden="item.num==0" -->
                                    <!-- {{ item.name +  (index==0? `(${waitMe})`: index==1? `(${waitHis})`:'') }} -->
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
                <el-col class="contract-right" style="padding-left: 4px">
                    <div class="container">
                        <!-- tab切换 -->

                        <el-tabs v-model="message">
                            <el-tab-pane label="未读消息" name="first">
                                <div style="position: relative; height: 100%">
                                    <div class="read-box">
                                        <el-button v-preventReClick :disabled="unread.length == 0" type="primary"
                                            @click="allRead" size="small">全部标记为已读</el-button>
                                    </div>
                                    <!-- :show-header="false" 不显示表格头 -->
                                    <el-table :data="unread" style="width: 100%" height="calc(100% - 50px)">
                                        <el-table-column label="消息名称" align="left">
                                            <template slot-scope="scope">
                                                <div class="new-list">
                                                    <div class="new-cont-meitr flex">
                                                        <div class="flex-meit-hue flex-sub">
                                                            <div class="flex">
                                                                <div class="new-title">{{ scope.row.templateName }}</div>
                                                                <div class="new-time" style="flex: 1; text-align: left">
                                                                    {{ parseTime(scope.row.createTime) }}
                                                                </div>
                                                            </div>
                                                            <div class="new-detail" v-html="contentToclick(scope.row.templateContent) ">
                    
                                                            </div>
                                                        </div>
                                                        <el-button v-preventReClick @click="checkInfo(scope)" type=""
                                                            size="mini" class="unread">标为已读</el-button>
                                                    </div>
                                                </div>

                                            </template>
                                        </el-table-column>
                                        <!-- <span slot="empty">
                                            <el-empty image="@/assets/images/file/kongZT.png"
                                                description="暂无未读消息"></el-empty>
                                        </span> -->
                                    </el-table>
                                    <div class="">
                                        <!-- 分页 -->
                                        <el-pagination class="pageBox" @current-change="currchange"
                                            layout="prev, pager, next" background :total="total">
                                        </el-pagination>
                                    </div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="已读消息" name="second">
                                <template v-if="message === 'second'">
                                    <el-table :data="read" height="calc(100% - 50px)" style="width: 100%">
                                        <el-table-column label="消息名称" align="left">
                                            <template slot-scope="scope">
                                                <div class="new-list">
                                                    <div class="flex">
                                                        <div class="new-title">{{ scope.row.templateName }}</div>
                                                        <div class="new-time" style="flex: 1; text-align: left">
                                                            {{ parseTime(scope.row.readTime) }}
                                                        </div>
                                                    </div>
                                                    <div class="new-detail" v-html="contentToclick(scope.row.templateContent) ">
        
                                                    </div>
                                                </div>

                                            </template>
                                        </el-table-column>
                                        <!-- <span slot="empty">
                                            <el-empty
                                                image="@/assets/images/file/kongZT.png"
                                                description="暂无已读消息"
                                            ></el-empty>
                                        </span> -->
                                    </el-table>
                                    <el-pagination class="pageBox" @current-change="currchanger" layout="prev, pager, next"
                                        background :total="totalr">
                                    </el-pagination>
                                </template>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-col>
            </div>
        </div>

        <el-dialog title="消息" :visible.sync="conSts" v-dialogDrag width="620px">
            <div class="notify-box">
                <!-- <div class="title">{{confirma.notifyTitle}}</div> -->
                <div class="notify-box_div">
                    <!-- 描述 -->
                    <h4>
                        {{ confirma.notifyContext }}
                        <!-- <span @click="jumpTo">查看</span> -->
                    </h4>
                    <!-- 时间 -->
                    <div class="time">{{ confirma.notifyTime }}</div>
                </div>
            </div>

            <div slot="footer" class="dialog-footer text-center">
                <el-button v-preventReClick @click="conSts = false" size="small" style="margin-right: 50px">关 闭</el-button>
                <el-button v-preventReClick @click="jumpTo" type="primary" size="small">查看</el-button>
                <!-- <el-button v-preventReClick @click="conSts = false" type="primary"  size="small">确定</el-button> -->
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getMyNotifyMessagePage, updateAllNotifyMessageRead, updateNotifyMessageRead } from "@/api/system/notify/message";

export default {
    name: 'tabs',
    data() {
        return {
            dataObj: {},
            message: 'first',
            conSts: false,
            confirma: {},
            unread: [],
            read: [],
            path: '/website',
            pageNum: 1,
            total: 0,
            pageNumr: 1,
            totalr: 0,
            titleActive: 1,
            titleList: [
                {
                    name: '审批消息',
                    icon: require('../../assets/images/file/applymsg.png'),
                    iconActive: require('../../assets/images/file/applymsg-active.png'),
                    num: 0,
                    status: '1'
                },
                {
                    name: '系统消息',
                    icon: require('../../assets/images/file/systemmsg.png'),
                    iconActive: require('../../assets/images/file/systemmsg-active.png'),
                    num: 0,
                    status: '1'
                }
            ]
        };
    },
    created() {
        this.getList();
        this.getListr();
        this.msgCount();
    },
    methods: {
        jumpTo() {
            if (!this.confirma.h5NotifyLink) {
                return false
            }
            console.log(this.confirma, 'this.confirma')
            let notifyType = this.confirma.notifyType
            if (notifyType == 'REGISTER_EVENT') {
                this.$router.push('/mine/account');
            } else if (notifyType == 'PERSONAL_REALNAME_AUTH_OK_EVENT') {
                this.$router.push('/mine/account');
            } else if (notifyType == 'PERSONAL_REALNAME_AUTH_FAIL_EVENT') {
                this.$router.push('/mine/account');
            } else if (notifyType == 'ORG_REALNAME_AUTH_OK_EVENT') {

                this.$router.push('/mine/account');
            } else if (notifyType == 'ORG_REALNAME_AUTH_FAIL_EVENT') {
                //企业认证失败跳转
                this.$router.push('/mine/account');
            } else if (notifyType == 'USER_PHONE_EVENT') {
                this.$router.push('/mine/account');
            } else if (notifyType == 'ACCOUNT_CANCEL_EVENT') {
                this.$router.push('/mine/account');
            } else if (notifyType == 'USER_JOIN_VERIFY_EVENT') {
                this.$router.push('/company/userManage');
            } else if (notifyType == 'SEAL_WAIT_VERIFY_EVENT') {
                this.$router.push('/company/signlist');
            } else if (notifyType == 'JOIN_ORG_CONMIT_EVENT') {
                this.$router.push('/mine/account');
            } else if (notifyType == 'JOIN_ORG_OK_EVENT') {
                this.$router.push('/company/userManage');
            } else if (
                notifyType == 'SIGN_START_EVENT' ||
                notifyType == 'SIGN_FINISH_EVENT' ||
                notifyType == 'SIGN_EXPIRE_EVENT' ||
                notifyType == 'SIGN_REFUSE_EVENT' ||
                notifyType == 'SIGN_CANCEL_EVENT' ||
                notifyType == 'WAIT_SIGN_EVENT' ||
                notifyType == 'WAIT_SIGN_EXPIRE_EVENT' ||
                notifyType == 'WAIT_SIGN_WOULD_EXPIRE_EVENT' ||
                notifyType == 'WAIT_SIGN_REFUSE_EVENT' ||
                notifyType == 'WAIT_SIGN_CANCEL_EVENT' ||
                notifyType == 'WAIT_SIGN_FINISH_EVENT' ||
                notifyType == 'APPROVE_EVENT' ||
                notifyType == 'APPROVE_REJECT_EVENT' ||
                notifyType == 'APPROVE_OK_EVENT'
            ) {
                let notifyLinkParam = JSON.parse(this.confirma.notifyLinkParam)

                this.$router.push({
                    path: this.$common.base64DeCode(this.$common.wxPage.signContract),
                    // path:'/signContract',
                    query: {
                        contId: notifyLinkParam.id
                    }
                }) //w未改
            }
        },
        // jumpTo() {
        //     let notifyType = this.confirma.notifyType;
        //     if (notifyType == 'REGISTER_EVENT') {
        //         this.$router.push('/mine/account');
        //     } else if (notifyType == 'PERSONAL_REALNAME_AUTH_OK_EVENT') {
        //         this.$router.push('/mine/account');
        //     } else if (notifyType == 'PERSONAL_REALNAME_AUTH_FAIL_EVENT') {
        //         this.$router.push('/mine/account');
        //     } else if (notifyType == 'ORG_REALNAME_AUTH_OK_EVENT') {
        //         this.$router.push('/mine/account');
        //     } else if (notifyType == 'ORG_REALNAME_AUTH_FAIL_EVENT') {
        //         this.$router.push('/mine/account');
        //     } else if (notifyType == 'USER_PHONE_EVENT') {
        //         this.$router.push('/mine/account');
        //     } else if (notifyType == 'ACCOUNT_CANCEL_EVENT') {
        //         this.$router.push('/mine/account');
        //     } else if (notifyType == 'JOIN_ORG_CONMIT_EVENT') {
        //         this.$router.push('/mine/account');
        //     } else if (notifyType == 'JOIN_ORG_OK_EVENT') {
        //         this.$router.push('/company/userManage');
        //     } else if (notifyType == 'USER_JOIN_VERIFY_EVENT') {
        //         this.$router.push('/company/userManage');
        //     } else if (notifyType == 'SEAL_WAIT_VERIFY_EVENT') {
        //         this.$router.push('/company/signlist');
        //     } else if (
        //         notifyType == 'SIGN_START_EVENT' ||
        //         notifyType == 'SIGN_FINISH_EVENT' ||
        //         notifyType == 'SIGN_EXPIRE_EVENT' ||
        //         notifyType == 'SIGN_REFUSE_EVENT' ||
        //         notifyType == 'SIGN_CANCEL_EVENT' ||
        //         notifyType == 'WAIT_SIGN_EVENT' ||
        //         notifyType == 'WAIT_SIGN_EXPIRE_EVENT' ||
        //         notifyType == 'WAIT_SIGN_WOULD_EXPIRE_EVENT' ||
        //         notifyType == 'WAIT_SIGN_REFUSE_EVENT' ||
        //         notifyType == 'WAIT_SIGN_CANCEL_EVENT' ||
        //         notifyType == 'WAIT_SIGN_FINISH_EVENT' ||
        //         notifyType == 'APPROVE_EVENT'
        //     ) {
        //         this.$router.push('/contract');
        //     }
        // },
        currchange(v) {
            this.pageNum = v;
            this.getList();
        },
        currchanger(v) {
            this.pageNumr = v;
            this.getListr();
        },
        getList() {
            let params = {
                pageNum: this.pageNum,
                pageSize: 10,
                readStatus: 0,
                classify: this.titleActive
            };
            getMyNotifyMessagePage(params).then((res) => {
                res.data.list.forEach((item) => {
                    item.sts = 1;
                });
                this.unread = res.data.list;
                this.total = res.data.total;
                console.log(this.unread, 'this.unread');
            });
        },
        getListr() {
            let params = {
                pageNum: this.pageNumr,
                pageSize: 10,
                readStatus: 1,
                classify: this.titleActive
            };
            getMyNotifyMessagePage(params).then((res) => {
                this.read = res.data.list;
                this.totalr = res.data.total;
            });
        },
        //标记已读
        handleRead(v) {
            updateNotifyMessageRead({ id: v.id }).then((res) => {
                this.getList();
                this.getListr();
                this.msgCount();
            });
        },
        //全部已读
        allRead(v) {
            updateAllNotifyMessageRead({
                classify: this.titleActive
            }).then((res) => {
                this.getList();
                this.getListr();
                this.msgCount();
            });
        },
        //查看消息
        checkInfo(v) {
            // this.conSts = true;
            this.confirma = v.row;
            // this.jumpTo();
            // if (v.row.sts == 1) {
                this.handleRead(v.row);
                // updateNotifyMessageRead({id:v.row.id}).then(res => {});
                // this.msgCount();
            // }

        },
        netType(index, item) {
            if (this.titleActive == index) {
                return false;
            }
            this.titleActive = index;
            this.getList();
            this.getListr();
        },
        msgCount() {
            // msgCount({
            //     readStatus: 0
            // }).then((res) => {
            //     let { data } = res;
            //     //  console.log(data,"data")
            //     this.$set(this.titleList[1], 'num', data.aCount);
            //     this.$set(this.titleList[2], 'num', data.sCount);
            //     // this.dataObj = data;
            // });
        },
        contentToclick(str) {
            let reg = /(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?/g;
            let newStr = str.replace(reg, '<a href="$&amp;" style="color: #175bec;">$&amp;</a>');
            return newStr
        },
    },
    computed: {
        unreadNum() {
            return this.unread.length;
        }
    },
    watch: {
        conSts(v) {
            if (!v && this.confirma.sts == 1) {
                this.getList();
                this.getListr();
            }
        }
    }
};
</script>

<style lang="less" scoped>
.read-box {
    position: absolute;
    right: 20px;
    top: -50px;
}

.new-list {
    cursor: pointer;

    .new-cont-meitr {
        // display: f;
        display: flex;
        align-items: center;

        .unread {
            border-color: #1257ff;
            color: #1257ff;
            border-radius: 4px;
        }
    }
}

.new-title {
    // flex:1;
    width: 200px;
    font-size: 15px;
    font-weight: bold;
}

.new-time {
    width: 90px;
    text-align: right;
}

.new-detail {
    font-size: 12px;
    // color: #959595;
    a{
        color: #175bec;
    }
}

.contract-cent {
    display: flex;
    justify-content: space-between;

    .contract-left {
        width: 210px;
    }

    .contract-right {
        flex: 1;
        width: 1px; // 大窗口变成小窗口不会自动收回，所以放了一个宽
        height: 100%;
        // min-height: 600px;
        display: flex;
        flex-direction: column;
        overflow: auto;

        .contract-r-t {
            // height: 200px;
            min-width: 1295px;

            ::v-deep .el-card__body {
                padding-bottom: 0;
                padding-top: 15px;
            }

            .el-form-item {
                margin-left: 20px;
            }
        }

        .contract-r-b {
            min-width: 1295px;
            flex: 1;
            height: 1px;
            margin-top: 4px;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
            border-radius: 4px;
            overflow: hidden;
            background-color: #fff;
            overflow: auto;
        }

        ::v-deep .el-table thead {
            font-family: PingFangSC-Medium;
            font-size: 14px !important;
            color: #333333 !important;
            font-weight: 500 !important;
            display: none;
        }

        ::v-deep .el-tabs__content {
            flex: 1;
            height: 0;
            overflow: visible;

            .el-tab-pane {
                height: 100%;
            }
        }

        // ::v-deep .el-tabs__nav-wrap::after {
        //     content: "";
        //     position: absolute;
        //     left: 0;
        //     bottom: 0;
        //     width: 100%;
        //     height: 1px;
        //     background-color: #f0f0f0;
        //     z-index: 100;
        // }
        // ::v-deep .el-tabs__active-bar {
        //     height: 1px;
        // }
    }
}

.leftcard {
    background-color: #fff;

    .el-card__body {
        padding: 0;
    }

    .cont-title-ul {
        width: 100%;

        li {
            padding-left: 30px;
            height: 46px;
            line-height: 46px;
            cursor: pointer;
            overflow: hidden;
            display: flex;
            align-items: center;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #333333;
            text-align: center;
            font-weight: 400;

            span {
                margin-left: 6px;
            }

            .el-image {
                margin-right: 0px;
            }
        }

        .active {
            color: #175bec;
            font-weight: 700;
            background: #e2edff;

            .el-image {
                filter: drop-shadow(#175bec 100px 0);
                left: -100px;
            }
        }
    }
}

// 大盒
::v-deep .numbox .el-badge__content {
    top: 3px;
    position: relative;
    border: none;
}

.notice {
    // margin-top:4px ;
    overflow: hidden;

    .message-title {
        cursor: pointer;
    }

    .handle-row {
        margin-top: 10px;
    }

    // 弹出的消息盒子
    .notify-box {
        .title {
            font-size: 16px;
            margin-bottom: 20px;
            color: #175bec;
        }

        &_div {
            display: flex;
            flex-direction: column;
            line-height: 35px;
            padding: 0px 80px;

            .time {
                width: 100%;
            }
        }
    }

    .pageBox {
        text-align: right;
        margin-top: 10px;
    }

    // table 消息名称样式
    .table_xiaoxi {
        font-size: 14px;
        color: #333333;
        letter-spacing: 0;
        line-height: 18px;
        font-weight: 400;
        cursor: pointer;
    }

    //  标记已读文字
    .yiDu {
        font-size: 14px;
        color: #1257ff;
        letter-spacing: 0;
        font-weight: 400;
        cursor: pointer;
    }

    // 分页加按钮
    .pag_btn {
        display: flex;
        justify-content: space-between;
    }

    // tabs下线的样式
    ::v-deep .el-tabs__nav-wrap::after {
        height: 1px;
    }

    ::v-deep .el-tabs__active-bar {
        height: 1px;
    }

    // 消息列表高度
    ::v-deep.el-card__body {
        height: 84vh;
    }

    // 表格头文字颜色
    ::v-deep.el-table thead {
        color: #333 !important;
        font-weight: 500;
        font-size: 14px;
    }

    ::v-deep .el-card__header {
        padding-bottom: 0 !important;
    }

    ::v-deep .el-tabs {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    // 清除padding

    .container {
        padding: 0 0 0 10px !important;
        border: 0;
        box-sizing: content-box;
        height: 100%;
        // style="border:0;padding-left:10px;"
    }
}
</style>
